<template>
  <!--  <view class="blood-oxygen-container" :class="oxygenLevelClass">-->
  <!--    <view class="oxygen-display">-->
  <!--      <text class="oxygen-value">{{ formattedOxygen }}</text>-->
  <!--      <text class="oxygen-label">血氧浓度</text>-->
  <!--    </view>-->
  <!--    <view class="oxygen-status">-->
  <!--      <text class="status-text">本次测量{{ oxygenStatus }}</text>-->
  <!--    </view>-->

  <!--    &lt;!&ndash; 添加过渡线条 &ndash;&gt;-->
  <!--    <view class="divider"></view>-->

  <!--    <view class="reference-range">-->
  <!--      <view class="range-title">-->
  <!--        <text class="title-text">血氧浓度参考范围</text>-->
  <!--      </view>-->
  <!--      <view class="range-bar">-->
  <!--        <view class="range-segment normal-segment">-->
  <!--          <text class="segment-text">正常≥95%</text>-->
  <!--        </view>-->
  <!--        <view class="range-segment low-segment">-->
  <!--          <text class="segment-text">偏低90%-94%</text>-->
  <!--        </view>-->
  <!--        <view class="range-segment very-low-segment">-->
  <!--          <text class="segment-text">过低＜90%</text>-->
  <!--        </view>-->
  <!--      </view>-->
  <!--    </view>-->
  <!--  </view>-->

  <!--  <div class="section">-->
  <!--    <div class="section-header">-->
  <!--      <div>-->
  <!--        <el-text class="section-title" >{{ '分析建议' }}</el-text>-->
  <!--      </div>-->
  <!--      <el-button class="edit-button" @click="dynamicEdit()">-->
  <!--        <font-awesome-icon :icon="['fas','fa-pencil-alt']" class="edit-icon"></font-awesome-icon>-->
  <!--        <el-text v-if="!editMode"  class="edit-text">编辑</el-text>-->
  <!--        <el-text v-if="editMode"  class="edit-text">保存</el-text>-->
  <!--      </el-button>-->
  <!--    </div>-->
  <!--    <div class="section-content">-->
  <!--      <div v-if="editMode" class="section-content-input">-->
  <!--        <el-input  type="textarea" class="input-area"  :rows="4" v-model="diagnoiseBlood"></el-input>-->
  <!--      </div>-->
  <!--      <el-text v-else class="text-content">{{ diagnoiseBlood }}</el-text>-->
  <!--    </div>-->
  <!--  </div>-->

</template>

<script>
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";

export default {
  name: "BloodOxygen",
  components: {FontAwesomeIcon},
  props: {
    oxygen: {
      type: Number,
      required: true
    }
  },
  data(){
    return {
      editMode:false,
      diagnoiseBlood:"2222"
    }
  },
  computed: {
    formattedOxygen() {
      return `${(this.oxygen * 100).toFixed(0)}%`;
    },
    oxygenStatus() {
      const oxygenPercentage = this.oxygen * 100;
      if (oxygenPercentage >= 95) {
        return "血氧水平正常";
      } else if (oxygenPercentage >= 90) {
        return "血氧水平偏低";
      } else {
        return "血氧水平过低，请注意！";
      }
    },
    oxygenLevelClass() {
      const oxygenPercentage = this.oxygen * 100;
      if (oxygenPercentage >= 95) {
        return "normal";
      } else if (oxygenPercentage >= 90) {
        return "low";
      } else {
        return "very-low";
      }
    }
  }
  ,
  methods:{
    dynamicEdit(){
      this.editMode=!this.editMode;
    }
  }
};
</script>

<style scoped>
.blood-oxygen-container {
  width: 95%;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

/* 背景颜色和字体颜色根据血氧水平动态变化 */
.normal {
  background-color: #e6fffb;
}

.normal .oxygen-value,
.normal .status-text {
  color: #52c41a;
}

.low {
  background-color: #fff7e6;
}

.low .oxygen-value,
.low .status-text {
  color: #faad14;
}

.very-low {
  background-color: #fff1f0;
}

.very-low .oxygen-value,
.very-low .status-text {
  color: #f5222d;
}

.oxygen-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.oxygen-value {
  font-size: 70px;
  font-weight: bold;
  margin-right: 10px;
}

.oxygen-label {
  font-size: 28px;
  color: #666666;
}

.oxygen-status {
  margin-top: 10px;
  text-align: center;
}

.status-text {
  font-size: 24px;
  font-weight: bold;
}

/* 新增过渡线条样式 */
.divider {
  width: 80%;
  height: 2px;
  background-color: #d9d9d9;
  margin: 20px 0;
}

.reference-range {
  width: 100%;
}

.range-title {
  margin-bottom: 10px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.title-text {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}

.range-bar {
  display: flex;
  width: 100%;
  height: 60px;
  border-radius: 40px;
  overflow: hidden;
}

.range-segment {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.segment-text {
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  white-space: pre-line;
}

.normal-segment {
  background-color: #52c41a;
}

.low-segment {
  background-color: #faad14;
}

.very-low-segment {
  background-color: #f5222d;
}

.section {
  width: 100%;
  background: #eff2f9;
  padding: 20px 10px;
  box-sizing: border-box;
  border-radius: 10px;
}

.section-title {
  font-size: 16px;
  //margin-left: 5%;
  font-weight: bold;
  margin: 0;

}

.section-header {
  width: 100%;
  display: flex;
  //margin-top: 20px;
  justify-content: space-between;
  align-items: center;
}

.edit-button {
  margin-left: auto;
  background-color: #eff2f9;
  border: none;
}

.edit-icon {
  color: #3dd986;
  margin-left: 10px;
  margin-right: 10px;
  width: 20px;
  height: 20px;
}

.edit-text {
  font-size: 17px;
  color: #3dd986;
}

.section-content {
  width: 100%;
  display: flex;
  align-items: center;
}
.section-content-input{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-area {
  height: 100%;
  width: 95%;
}

.text-content {
  font-size: 16px;
  margin-left: 5%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 5vh;
}

</style>